<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>{echo admin_title()}</title>
<!--header-->
{template _:header}
<style>
#template_benefit_info_detail{padding-top:1em; margin-top:15px; border-top:1px solid #e6e6e6;}
#template_benefit_info_detail .layui-form-label{width:4em; padding-left:0;}
#template_benefit_info_detail .layui-input-block{margin-left:71px;}
.layui-upload.card_bg_url .layui-upload-list{ width: 251px; height: 140px; line-height: 140px;}
.layui-upload.card_logo_url .layui-upload-list{ width: 80px; height: 80px; line-height: 80px;}
.layui-upload .layui-upload-list .layui-upload-img{ max-width: 100%; width:100%; height: 100%; background: #fff url('/public/image/image.png') no-repeat center center;}
.layui-upload .layui-upload-list{ display: inline-block; position: relative; margin-right: 10px;}
.layui-upload .layui-upload-list .progress-mask{ position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background:rgba(0,0,0,.6);}
.layui-upload .layui-upload-list .progress-text{ position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; color:#fff; text-align: center; text-shadow: 0px 1px 1px black;}
p.tip{ color:#999; font-size: small;}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--top-->
{template _main_top}
<!--nav-->
{template _main_nav}
	<div class="position"><h1>支付宝配置</h1></div>
	<div class="layui-body admin-body">
		<div class="admin-content">
			<div class="layui-tab layui-tab-brief" style="margin-top:-5px;">
				<ul class="layui-tab-title layui-tab-links">
					<li class="<!--{if request()->action() == 'index'}-->layui-this<!--{/if}-->"><a href="{echo url('alipay/index')}">支付宝授权</a></li>
					<li class="<!--{if request()->action() == 'card'}-->layui-this<!--{/if}-->"><a href="{echo url('alipay/card')}">支付宝会员卡</a></li>
				</ul>
			</div>
			<div class="opwindow">
				<form name="theform" id="theform" method="post" action="{echo \befen\get_url()}" class="layui-form">
					<table class="layui-table">
						<tbody>
							<tr>
								<td class="td1">会员卡状态：</td>
								<td class="td2">
									<div class="layui-form-item">
										<input type="checkbox" name="is_card" lay-filter="is_card" lay-skin="switch" lay-text="开启|关闭" <!--{echo !empty($value['is_card']) ? 'checked' : '';}--> value="1">
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">充值(iot小程序)：</td>
								<td class="td2">
									<div class="layui-form-item">
										<input type="checkbox" name="is_charge" lay-filter="is_charge" lay-skin="switch" lay-text="开启|关闭" <!--{echo !empty($value['is_charge']) ? 'checked' : '';}--> value="1">
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">会员卡背景：</td>
								<td class="td2">
									<div class="layui-upload card_bg_url">
										<div class="layui-upload-list">
											<img class="layui-upload-img" src="{$value[card_bg_url]}" onerror="this.src='/public/image/blank.png'">
											<div class="progress-mask"></div>
											<span class="progress-text" style="display:none;">0%</span>
											<input type="hidden" name="background_id" value="{$value[background_id]}">
											<input type="hidden" name="card_bg_url" value="{$value[card_bg_url]}">
										</div>
										<button type="button" class="layui-btn">上传图片</button>
										<p class="tip">* 图片说明：2M以内，格式：png、jpg；尺寸不小于1000*600px；图片不得有圆角，不得拉伸变形</p>
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">会员卡LOGO：</td>
								<td class="td2">
									<div class="layui-upload card_logo_url">
										<div class="layui-upload-list">
											<img class="layui-upload-img" src="{$value[card_logo_url]}" onerror="this.src='/public/image/blank.png'">
											<div class="progress-mask"></div>
											<span class="progress-text" style="display:none;">0%</span>
											<input type="hidden" name="logo_id" value="{$value[logo_id]}">
											<input type="hidden" name="card_logo_url" value="{$value[card_logo_url]}">
										</div>
										<button type="button" class="layui-btn">上传图片</button>
										<p class="tip">* 图片说明：1M以内，格式png、jpg；尺寸不小于300*300px的正方形；请优先使用商家LOGO；</p>
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">会员卡标题：</td>
								<td class="td2">
									<input type="text" name="card_show_name" placeholder="请输入标题" class="layui-input" value="{$value['card_show_name']}" lay-verify="required">
								</td>
							</tr>
							<tr>
								<td class="td1">有效期：</td>
								<td class="td2">永久有效</td>
							</tr>
							<tr>
								<td class="td1">商家电话：</td>
								<td class="td2">
									<input type="text" name="phone" placeholder="请输入电话" class="layui-input" value="{$value['phone']}" lay-verify="required">
								</td>
							</tr>
							<tr style="display:none;">
								<td class="td1">会员权益信息：</td>
								<td class="td2">
									<div class="layui-form">
										<div class="layui-form-item">
											<input type="checkbox" name="template_benefit_info[show]" lay-skin="switch" lay-text="开启|关闭" lay-filter="template_benefit_info[show]" <!--{echo !empty($value['template_benefit_info']['show']) ? 'checked' : '';}--> value="1">
										</div>
										<div id="template_benefit_info_detail" <!--{if empty($value['template_benefit_info']['show'])}-->style='display:none'<!--{/if}-->>
											<div class="layui-form-item">
												<label class="layui-form-label">权益标题</label>
												<div class="layui-input-block">
													<input type="text" name="template_benefit_info[title]" value="{$value[template_benefit_info][title]}" class="layui-input" placeholder="">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">权益描述</label>
												<div class="layui-input-block">
													<textarea name="template_benefit_info[benefit_desc]" class="layui-textarea" placeholder="">{$value[template_benefit_info][benefit_desc]}</textarea>
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">开始时间</label>
												<div class="layui-input-block">
													<input type="text" name="template_benefit_info[start_date]" value="{$value[template_benefit_info][start_date]}" class="layui-input" placeholder="2019-01-01 00:00:00">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">结束时间</label>
												<div class="layui-input-block">
													<input type="text" name="template_benefit_info[end_date]" value="{$value[template_benefit_info][end_date]}" class="layui-input" placeholder="2099-01-01 00:00:00">
												</div>
											</div>
										</div>
									</div>
								</td>
							</tr>
							<tr>
								<td class="td1">&nbsp;</td>
								<td class="td2">
									<button type="submit" name="submit" value="submit" id="submit" class="layui-btn" lay-submit lay-filter="*">提交</button>
									<button style="display:none;" type="button" class="layui-btn layui-btn-primary" id="card_activateurl">领卡链接</button>
									<p class="tip" style="margin-top:10px">* 如果领卡时提示 “系统异常，请联系商家（ERR010）”，请设置商户的授权回调地址，<a href="https://opensupport.alipay.com/support/knowledge/24133/201602359168?ant_source=zsearch" target="blank">点此查看详情</a></p>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
			</div>
		</div>
	</div>
</div>

<!--footer-->
{template _:footer}
<script type="text/javascript">
init_upload({
	elem: document.querySelector('.layui-upload.card_bg_url > button'),
	field: 'image',
	url: '/merchant/alipay/media_upload',
	//exts: '',
	//acceptMime: '',
	callback: function(item, data, index, upload){
		console.log(data);
		if(data.status == 0) {
			showTips(null, data.message);
		} else {
			item.parent().find('.layui-upload-img').attr("src", data.contents.local_url);
			$('.layui-upload.card_bg_url > .layui-upload-list input[name=background_id]').val(data.contents.image_url);
			$('.layui-upload.card_bg_url > .layui-upload-list input[name=card_bg_url]').val(data.contents.local_url);
		}
	}
});
init_upload({
	elem: document.querySelector('.layui-upload.card_logo_url > button'),
	field: 'image',
	url: '/merchant/alipay/media_upload',
	//exts: '',
	//acceptMime: '',
	callback: function(item, data, index, upload){
		console.log(data);
		if(data.status == 0) {
			showTips(null, data.message);
		} else {
			item.parent().find('.layui-upload-img').attr("src", data.contents.local_url);
			$('.layui-upload.card_logo_url > .layui-upload-list input[name=logo_id]').val(data.contents.image_url);
			$('.layui-upload.card_logo_url > .layui-upload-list input[name=card_logo_url]').val(data.contents.local_url);
		}
	}
});
layui.use(['laydate','form','upload','element'], function(){

	var form = layui.form, laydate = layui.laydate;
	form.on('switch(is_card)', function(data){
		var is_card = data.elem.checked ? 1 : 0;
		$.ajax({
			type: "POST",
			dataType: "json",
			timeout: 50000,
			url: "{echo url('card_switch')}",
			data: {
				ajax: "json",
				is_card: is_card,
			},
			success: function(data){
				if(data.status == 1) {
					showInfo(data.message);
				} else {
					showAlert(data.message, function(){
						reload();
					});
				}
			},
			error: function(data){
				showAlert("提交数据失败", function(){
					reload();
				});
			},
			complete: function(){
				hideLoader();
			},
			beforeSend: function(){
				showLoader();
			}
		});
	});
	form.on('switch(is_charge)', function(data){
		var is_charge = data.elem.checked ? 1 : 0;
		$.ajax({
			type: "POST",
			dataType: "json",
			timeout: 50000,
			url: "{echo url('charge_switch')}",
			data: {
				ajax: "json",
				is_charge: is_charge,
			},
			success: function(data){
				if(data.status == 1) {
					showInfo(data.message);
				} else {
					showAlert(data.message, function(){
						reload();
					});
				}
			},
			error: function(data){
				showAlert("提交数据失败", function(){
					reload();
				});
			},
			complete: function(){
				hideLoader();
			},
			beforeSend: function(){
				showLoader();
			}
		});
	});
	laydate.render({ 
		elem: document.querySelector('input[name="template_benefit_info[start_date]"]')
		,type: 'datetime'
	});
	laydate.render({ 
		elem: document.querySelector('input[name="template_benefit_info[end_date]"]')
		,type: 'datetime'
	});

	//会员权益信息
	form.on('switch(template_benefit_info[show])', function(data){
		$('#template_benefit_info_detail').toggle();
	});

	form.on('submit(*)', function(data){
		if(data.field['template_benefit_info[show]'] == 1){
			if(!(data.field['template_benefit_info[title]'] && data.field['template_benefit_info[benefit_desc]'] && data.field['template_benefit_info[start_date]'] && data.field['template_benefit_info[end_date]'])){
				layer.alert('会员权益信息均为必填项');
				return false;
			}
			data.field['template_benefit_info[benefit_desc]'] = data.field['template_benefit_info[benefit_desc]'].split('\n');
		}
		$.ajax({
			method: 'post',
			url: '{echo \befen\get_url()}', 
			data: data.field,
			success: (res) => {
				if(res.status != 1) {
					if(res.message){
						showAlert(res.message);
					} else {
						showAlert("请求失败");
					}
				} else {
					showInfo("操作成功");
				}
			},
			complete: function(){
				hideLoader();
			},
			beforeSend: function(){
				showLoader();
			}
		});
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});

	$('#card_activateurl').click(function(e){
		$.ajax({
			method: 'post',
			url: '/merchant/alipay/card_activateurl',
			data: {},
			success: res => {
				if(res.status != 1) {
					if(res.message){
						showAlert(res.message);
					} else {
						showAlert("请求失败");
					}
				} else {
					layer.open({
						title: '支付宝APP扫码领卡',
						shade: 0.5,
						isOutAnim: true,
						content: '<div style="text-align:center"><div id="card_qrcode" style="width:250px;height:250px;margin:0 auto 1em;"></div>' + res.contents.apply_card_url + '</div>',
						btn: false
					});
					var qrcode = new QRCode(document.getElementById("card_qrcode"), {
						width: 250,
						height: 250
					});
					qrcode.makeCode(res.contents.apply_card_url);
				}
			},
			error: function(){
				hideLoader();
			},
			complete: function(){
				hideLoader();
			},
			beforeSend: function(){
				showLoader();
			}
		});
	});

});
</script>
</body>
</html>